<template>
    <div class="l-rblock l-desktop" >
        <div v-show="steps(0)" class="l-rblock" style="padding:24px;" >
            <div class="l-page-panel" >
                <el-form :model="formData" :rules="rules" size="mini"  ref="baseInfo" label-width="86px" >
                    <el-col :span="24">
                        <el-form-item :label="$t('编号')" prop="f_Code">
                            <el-input v-model="formData.f_Code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('名称')" prop="f_Title">
                            <el-input v-model="formData.f_Title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('图标')" prop="f_Icon">
                            <l-input-icon :iconList="lr_icons"  v-model="formData.f_Icon" >
                            </l-input-icon>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('上级')" prop="f_PModuleId">
                            <l-tree-select
                                v-model="formData.f_PModuleId"
                                :options="modulesExpandTree">
                            </l-tree-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('排序')" prop="f_SortCode">
                            <el-input-number v-model="formData.f_SortCode"  controls-position="right" :min="1" ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('轮播时间(s)')" prop="f_Interval" v-if="type==1">
                            <el-input-number v-model="formData.f_Interval"  controls-position="right" :min="0" ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('菜单')"  prop="f_IsMenu" >
                                <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="formData.f_IsMenu"
                                >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('状态')"  prop="f_Status"  >
                            <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="formData.f_Status"
                                >
                            </el-switch>
                        </el-form-item>
                    </el-col>

                    
                    <el-col :span="24">
                        <el-form-item :label="$t('描述')" prop="f_Description">
                            <el-input type="textarea" :rows="4" v-model="formData.f_Description"></el-input>
                        </el-form-item>
                    </el-col>                   
                </el-form>
            </div>
        </div>
        <div v-show="steps(1)" class="l-rblock">
            <iframe v-if="type==0" :src="`${rootUrl}vdata/preview?id=${formData.f_Id}`" frameborder="0" width="100%" height="100%"></iframe>
            <div v-else class="swiperPre">
                <el-carousel height="100%" :interval="formData.f_Interval * 1000 || 0" indicator-position="none" :autoplay="formData.f_Interval?true:false">
                    <el-carousel-item v-for="item in ids" :key="item">
                      <iframe :src="`${rootUrl}vdata/preview?id=${item}`" frameborder="0" width="100%" height="100%"></iframe>
                    </el-carousel-item>
                  </el-carousel>
            </div>
        </div>
    </div>
</template>
<script>

import { mapGetters } from "vuex";
export default {
    props:{
        stepActive: {
            type:Number,
            default:0
        },
        type: {
            type: Number,
            default: 0
        },
        ids: {
            type: Array,
            default: ()=>{
                return []
            }
        }
    },
    data(){
        return {
            // componentList,
            formData:{
                f_Type:1,
                f_Code:'',
                f_Title:'',
                f_Icon: 'learun-icon-computer',
                f_PModuleId:'',
                f_ModuleId:'',
                f_SortCode:'',
                f_Interval: 1,
                f_IsMenu:1,
                f_Status:1,
                f_IsFirst:1,
                f_Description:'',
                f_Id : '',
                lrDatavVisualconfigList: []
            },
            rules: {
                f_Code: [
                    { required: true, message: this.$t('请输入编号'),trigger: 'blur' },
                    { validator: this.lr_existDbFiled,keyValue:() => { return this.formData.f_ModuleId },tableName:'lr_datav_visual',fieldName:'f_Code',keyName:'f_ModuleId',trigger: 'null'}
                ],
                f_Title: [
                    { required: true, message:  this.$t('请输入名称'),trigger: 'blur' }
                ],
                f_Icon: [
                    { required: true, message:  this.$t('请选择图标'),trigger: 'blur' }
                ],
                f_PModuleId: [
                    { required: true, message:  this.$t('请输入上级'),trigger: 'blur' }
                ],
            },
            layout: [],
        }
    },
    computed:{
        ...mapGetters(["modulesExpandTree"]),
    },
    mounted () {
    },
    methods:{
        resetForm() {
            this.formData = {
                f_Type:1,
                f_Code:'',
                f_Title:'',
                f_Icon: 'learun-icon-computer',
                f_PModuleId:'',
                f_ModuleId:'',
                f_SortCode:'',
                f_Interval: 1,
                f_IsMenu:1,
                f_Status:1,
                f_IsFirst:1,
                f_Description:'',
                f_Id : '',
                lrDatavVisualconfigList: []
            }
        },
        steps(num){
            return this.stepActive == num
        },
        getForm(){
            let postData = {}
            if (this.type===0) {
                postData = {
                    lrDatavVisualEntity:this.$deepClone(this.formData),
                    lrDatavVisualconfigList: this.lrDatavVisualconfigList
                }
                postData.moduleEntity = { 
                    f_EnCode: postData.lrDatavVisualEntity.f_Code,
                    f_FullName: postData.lrDatavVisualEntity.f_Title,
                    f_ParentId: postData.lrDatavVisualEntity.f_PModuleId,
                    f_Icon: postData.lrDatavVisualEntity.f_Icon,
                    f_Target: `datavView`,
                    f_IsMenu: postData.lrDatavVisualEntity.f_IsMenu || 0,
                    f_DeleteMark:0,
                    f_UrlAddress:`${this.rootUrl}vdata/preview?id=${this.formData.f_Id}`,
                    f_EnabledMark:postData.lrDatavVisualEntity.f_Status,
                    f_SortCode: postData.lrDatavVisualEntity.f_SortCode,
                    f_Description: postData.lrDatavVisualEntity.f_Description
                }
            } else {
                const formData = this.$deepClone(this.formData)
                postData = {
                    baseInfo: {
                        f_ParentId: formData.f_PModuleId,
                        f_EnCode: formData.f_Code,
                        f_FullName: formData.f_Title,
                        f_Icon: formData.f_Icon,
                        f_UrlAddress: `${this.rootUrl}vdata/swiperPreview?ids=${JSON.stringify(this.ids)}&interval=${this.formData.f_Interval}`,
                        f_Target: `datavSwiperView`,
                        f_IsMenu: formData.f_IsMenu || 0,
                        f_AllowExpand: 0,
                        f_IsPublic: 0,
                        f_AllowEdit: 0,
                        f_AllowDelete: 0,
                        f_SortCode: formData.f_SortCode,
                        f_DeleteMark: 0,
                        f_EnabledMark: formData.f_Status,
                        f_Description: formData.f_Description,
                    },
                }
            }
            
            return postData  
        },
        setForm(data, type){
            if (type == 1) {
                this.formData = {...data, f_Code: data.f_EnCode, f_Title: data.f_FullName, f_PModuleId: data.f_ParentId, f_Status: data.f_EnabledMark, f_Interval: data.f_Interval}
            } else {
                this.lrDatavVisualconfigList = data.lrDatavVisualconfigList
            this.formData = data.lrDatavVisualEntity
            
            this.formData.f_IsMenu = this.formData.f_IsMenu == null ? 1 : this.formData.f_IsMenu
            if (data.lrDatavVisualEntity.f_Icon === null) this.formData.f_Icon = 'learun-icon-computer'
            }
            
        },
        validateBaseInfo(){
            return new Promise((resolve) => {
                this.$refs.baseInfo.validate((valid) => {
                    if(valid){
                        resolve(true)
                    }
                    else{
                        resolve(false)
                    }
                })
            })
        },

        validateSteps(){
            return new Promise((resolve) => {
                this.validateBaseInfo().then(res=>{
                        resolve(res)
                    })
            });
        }
    }
}
</script>
<style lang="scss">
    .swiperPre{
        width: 100%;
        height: 100%;
    }
    .swiperPre .el-carousel{
        height: 100%;
    }
    .swiperPre .el-carousel__arrow i {
      font-size: 29px !important;
    }
    </style>

